<template>
  <div class="in-block">
    <div class="title">执行策略</div>
    <el-form ref="elForm" class="dia-form" :model="formData" :rules="rules" label-width="100px" @submit.native.prevent>
      <el-col :span="24">
        <el-form-item prop="type" label="执行方式">
          <el-radio-group v-model="formData.type" size="small" @change="changeRadio">
            <el-radio border label="fixRate">周期性执行</el-radio>
            <el-radio border label="timing">定时执行</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <!-- 周期执行 -->
      <el-col :span="24">
        <el-form-item
          prop="type"
          label="执行配置"
          :rules="{
            required: true,
            message: '不能为空 ',
          }"
        >
          <div v-if="formData.type == 'timing'">
            每
            <el-select
              v-model="formData.timing.lifecycle"
              placeholder="请选择"
              clearable
              style="width: 150px; margin: 0 10px"
            >
              <el-option label="天" value="day" />
            </el-select>
            <el-time-select
              v-model="formData.tempTime"
              placeholder="请选择"
              clearable
              style="width: 150px; margin-right: 20px"
              :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00',
              }"
            />
            执行一次
          </div>
          <div v-else :span="24">
            每
            <!-- 小时时 -->
            <el-select
              v-if="formData.fixRate.unit == 'hour'"
              v-model="formData.fixRate.frequency"
              placeholder="请选择"
              clearable
              :disabled="!formData.fixRate.unit"
              style="width: 150px; margin: 0 10px"
            >
              <el-option v-for="(item, index) in 24" :key="index" :label="item" :value="item" />
            </el-select>
            <!-- 分钟时 -->
            <el-select
              v-else
              v-model="formData.fixRate.frequency"
              placeholder="请选择"
              clearable
              :disabled="!formData.fixRate.unit"
              style="width: 150px; margin: 0 10px"
            >
              <el-option v-for="(item, index) in 60" :key="item + '' + index" :label="item" :value="item" />
            </el-select>
            <!-- 选择小时还是分钟 -->
            <el-select
              v-model="formData.fixRate.unit"
              placeholder="请选择"
              clearable
              style="width: 150px; margin-right: 20px"
            >
              <el-option label="分钟" value="min" />
              <el-option label="小时" value="hour" />
            </el-select>
            执行一次
          </div>
        </el-form-item>
      </el-col>
    <!-- 定时执行 -->
    </el-form>
  </div>

</template>
<script>
export default {
  components: {},
  props: {
    form: {
      type: Object,
      default: () => {
        return {
          timing: {},
          fixRate: {}
        }
      }
    }
  },

  data() {
    return {
      temp: [],
      rules: {
        type: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    formData() {
      return this.form
    }
  },
  watch: {
    formData: {
      handler(newValue, oldValue) {},
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    // 单选组事件
    changeRadio(val) {
      if (val === 'fixRate') {
        this.$message('请先选择【分钟/小时】，再选择【数值】')
        this.formData.timing = {}
      } else {
        this.formData.fixRate = {}
      }
    },

    // 提交
    async submit() {
      if (
        (this.formData.tempTime && this.formData.timing.lifecycle) ||
        (this.formData.fixRate.frequency && this.formData.fixRate.unit)
      ) {
        // 当选择定时执行时
        if (this.formData.tempTime) {
          this.formData.timing.hour = Number(this.formData.tempTime.split(':')[0])
        }
        // 处理描述
        if (this.formData.type === 'fixRate') {
          this.formData.desc = `每${this.formData.fixRate.frequency}${
            this.formData.fixRate.unit === 'hour' ? '小时' : '分钟'
          }执行一次`
        } else {
          this.formData.desc = `每天${this.formData.timing.hour}点执行一次`
        }

        const cron = {
          cron: this.formData
        }
        const res = this.$refs.elForm.validate()
        if (res) {
          return new Promise((resolve, reject) => {
            resolve(cron)
          })
        }
      } else {
        this.$message.warning('请完善执行配置')
        return new Promise((resolve, reject) => {
          return false
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.dia-form{
display: flex;
flex-direction: column;
}
.el-col+.el-col{
  margin-top: 20px;
}
</style>
